<template>
	<!-- 图片类型tab -->
	<view class="">
		<scroll-view  scroll-x class=" nav" scroll-with-animation
			:scroll-left="scrollLeft">
			<view class="cu-item tab-item" :class="index==TabCur?'active':''" v-for="(item,index) in imgTypeList"
				:key="index" @tap="tabSelect($event,item,index)" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			imgTypeList:{
				type:Array,
				default:()=>{
					return [
						
					]
				}
			}
		},
		data(){
			return {
				TabCur: 0,
				scrollLeft: 0,
			}
		},
		methods:{
			tabSelect(e, item, index) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.$emit('tabSelect',item,index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		font-size: 25rpx;
	}
	
	.active {
		font-size: 30rpx;
		color: #3bb1fe;
		border-bottom: 1rpx solid #3bb1fe;
	}
</style>